<template>
	<section >
		<!--工具条-->
		<el-col :span="24" class="toolbar" style="padding-bottom: 0px;">
			<el-form :inline="true" :model="filters">
				<el-form-item>
					<el-input v-model="filters.keyword" placeholder="关键字"></el-input>
				</el-form-item>
				<el-form-item>
					<el-button type="primary" v-on:click="loadData" icon="el-icon-search">查询</el-button>
				</el-form-item>
			</el-form>
		</el-col>

		<!--列表-->
		<el-table :data="adopts" highlight-current-row stripe border size="mini"
				  v-loading="listLoading" @selection-change="selsChange" style="width: 100%;height: auto;">
			<el-table-column type="selection" width="50">
			</el-table-column>
			<el-table-column type="index" width="60">
			</el-table-column>
			<el-table-column prop="title" label="标题" width="230"></el-table-column>
			<el-table-column prop="name" label="宠物名称" width="100"></el-table-column>
			<el-table-column prop="price" label="价格" width="60"></el-table-column>
			<el-table-column prop="age" label="年龄" width="50"></el-table-column>
			<el-table-column prop="gender" label="性别" width="50" >
				<template scope="scope">
					<span v-if="scope.row.gender == 0" style="color:salmon">母</span>
					<span v-else style="color: blue">公</span>
				</template>
			</el-table-column>
			<el-table-column prop="coatColor.name" label="毛色" width="60"></el-table-column>
			<el-table-column prop="petType.name" label="宠物类型" width="80"></el-table-column>
			<el-table-column prop="state" label="状态" width="60" >
				<template scope="scope">
					<span v-if="scope.row.state == 0" style="color: #11b95c">已处理</span>
					<span v-else style="color: #8c939d">待处理</span>
				</template>
			</el-table-column>
			<el-table-column prop="user.username" label="发布人" width="100"></el-table-column>
			<el-table-column prop="address" label="发布人地址" width="220"></el-table-column>
			<el-table-column label="操作" width="120">
				<template scope="scope">
					<el-button size="small" type="success" :disabled="scope.row.state==0" @click="handleEdit(scope.row)" icon="el-icon-edit">处理</el-button>
				</template>
			</el-table-column>
		</el-table>

		<!--分页条+ 批量删除-->
		<el-col :span="24" class="toolbar">
			<!--<el-button type="danger" @click="batchRemove" :disabled="this.sels.length===0">批量删除</el-button>-->
			<el-pagination layout="total, prev, pager, next"  @current-change="handleCurrentChange"
						   :page-size="pageSize"
						   :total="totals"
						   :current-page="adoptsForm.currentPage"
						   style="float:right;">
			</el-pagination>
		</el-col>

		<!--编辑界面
			:rules 申明数据校验规则
		-->
		<el-dialog title="处理" :visible.sync="adoptsFormVisible" :close-on-click-modal="false" >
			<el-form :model="adoptsForm" label-width="80px" ref="adoptsForm">
				<el-row>
					<el-col :span="24">
						<img :src="adoptsForm.resources.split(',')[0]" style="width: 150px;" />
					</el-col>
				</el-row>
				<el-row :gutter="10">
					<el-col :span="8">
						<el-form-item label="标题">{{adoptsForm.title}}</el-form-item>
					</el-col>
					<el-col :span="8">
						<el-form-item label="宠物名称">{{adoptsForm.name}}</el-form-item>
					</el-col>
					<el-col :span="8">
						<el-form-item label="宠物类型">{{adoptsForm.petType.name}}</el-form-item>
					</el-col>
				</el-row>
				<el-row :gutter="10">
					<el-col :span="8">
						<el-form-item label="年龄">{{adoptsForm.age}}</el-form-item>
					</el-col>
					<el-col :span="8">
						<el-form-item label="性别">{{adoptsForm.gender}}</el-form-item>
					</el-col>
					<el-col :span="8">
						<el-form-item label="价格">{{adoptsForm.price}}</el-form-item>
					</el-col>
				</el-row>
				<el-row :gutter="10">
					<el-col :span="8">
						<el-form-item label="毛色">{{adoptsForm.coatColor.name}}</el-form-item>
					</el-col>
					<el-col :span="8">
						<el-form-item label="发布人">{{adoptsForm.user.username}}</el-form-item>
					</el-col>
					<el-col :span="8">
						<el-form-item label="地址">{{adoptsForm.address}}</el-form-item>
					</el-col>
				</el-row>
				<el-row>
					<el-col :span="24">
						<el-form-item label="处理结果">
							<el-radio-group v-model="handleResult">
								<el-radio :label="1">接受</el-radio>
								<el-radio :label="2">拒绝</el-radio>
							</el-radio-group>
						</el-form-item>
					</el-col>
				</el-row>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click.native="adoptsFormVisible = false">取消</el-button>
				<el-button type="primary" @click.native="submitHandleResult" :loading="shopLoading">提交</el-button>
			</div>
		</el-dialog>
	</section>
</template>

<script>
	export default {
		data() {
			return {
				filters: {
                    keyword: '',
                    currentPage: 1,
					pageSize: 10,
				},
				adopts: [],
				totals: 0,
                pageSize:10,
				listLoading: false,
				sels: [],//列表选中列
				adoptsFormVisible: false,//弹出框界面是否显示
				shopLoading: false,//忙等框
				//编辑界面数据
				adoptsForm: {
					id: null,
					name: '',
					resources: '',
                    state: 1,
					price:'',
					title:'',
					age: '',
					gender: '',
					address: '',
                    petType:{
                        id:'',
                        name:''
					},
					user:{
					    id:'',
						username:''
					},
					coatColor:{
					    id:'',
						name:''
					}
				},
                handleResult: 1		//处理结果
			}
		},
		methods: {
			handleCurrentChange(val) {
				this.page = val;
				this.loadData();
			},
			//获取部门列表
			loadData() {
				let para = {
					currentPage: this.page,
                    keyword: this.filters.keyword
				};
				this.listLoading = true;
				//NProgress.start();
				this.$http.post("/adopt",para).then(result => {
					this.listLoading = false;
					result = result.data;//直接抽取了一层
					this.totals = result.totals;
					this.adopts = result.rows;
				}).catch(result=>{
					alert("系统错误！！！");
					this.listLoading = false;
				})
			},
			//显示编辑界面
            handleEdit: function (row) {
                //先清空fileList
                this.fileList = []
				//先重置表单
                this.adoptsForm = {
                    id: null,
                    name: '',
                    resources: '',
                    state: 1,
                    price:'',
                    title:'',
                    age: '',
                    gender: '',
                    address: '',
                    petType:{
                        id:'',
                        name:''
                    },
                    user:{
                        id:'',
                        username:''
                    },
                    coatColor:{
                        id:'',
                        name:''
                    }
                }
                this.adoptsFormVisible = true;//弹出编辑框
				//Object.assign  克隆数据
				this.adoptsForm = Object.assign({}, row);//数据回显

			},
			//提交处理结果
            submitHandleResult: function () {
				this.shopLoading = true;  //开启 正在加载
				//NProgress.start();
				this.$http.get('/adopt/'+this.adoptsForm.id+"/"+this.handleResult).then(res => {
					this.shopLoading = false		//关闭 正在加载
					let {success,message} = res.data
					if(success){
						this.$message.success(message)
						this.adoptsFormVisible = false	//关闭模态框
						//重新加载表格数据
						this.filters.currentPage = 1
						this.loadData();
					}else{
						this.$message.error(message)
					}
				})
			},
			selsChange: function (sels) {
				this.sels = sels;
			},
			//文件上传成功
            handleSuccess(response, file, fileList){
			    this.productResource.push(response.data)
				this.adoptsForm.resources = this.productResource.join(",")
			},
			//点击删除已上传到fastdfs的文件
			handleRemove(file, fileList){

			}
		},
		mounted() {
			this.loadData();
		}
	}

</script>

<!--
	scoped ：作用域
-->
<style>
	.el-dialog{width: 70%;}
	.ql-editor{height: 100px!important;}
</style>